<!--
 * @Describe: 可搜索的大数据量下拉框
 * @Author:
 * @Date:
 * @LastEditTime:
 * @FilePath:
-->
<template>
  <vxe-pulldown style="width: 100%" ref="xDown">
    <template #default>
      <el-input
        v-model="inputValue"
        @keyup="keyupEvent"
        @focus="focusEvent"
        @change="onChange"
        @input="onInput"
        suffix-icon="ArrowDown"
      >
      </el-input>
    </template>
    <template #dropdown>
      <vxe-list height="200" class="my-dropdown2" :data="list" auto-resize>
        <template #default="{ items }">
          <div class="list-item2" v-for="item in items" :key="item[values]" @click="selectEvent(item[labels])">
            <span>{{ item[labels] }}</span>
          </div>
        </template>
      </vxe-list>
    </template>
  </vxe-pulldown>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
// import { VxePulldownInstance } from "vxe-table";
import { VxePulldown, VxeList } from "vxe-pc-ui";
export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    labels: {
      type: String,
      default: "label"
    },
    values: {
      type: [String, Number],
      default: "value"
    },
    value: {
      type: [String, Number],
      default: ""
    }
  },
  emits: ["input", "update:value", "change"],
  setup(props, context) {
    const inputValue = ref(props.value);
    const list = ref<any>([]);
    const data = toRefs(props).data;
    const xDown = ref();
    const xInput = ref();
    // 聚集焦点,显示下拉框
    const focusEvent = () => {
      xDown.value?.showPanel();
      const value = xInput.value;
      list.value = value ? data.value.filter((item: any) => item[props.labels].indexOf(value) > -1) : data.value;
    };
    // 筛选关键字
    const keyupEvent = (event: Event) => {
      const value = (event.target as HTMLInputElement).value;
      list.value = value ? data.value.filter((item: any) => item[props.labels].indexOf(value) > -1) : data.value;
    };
    // 选中某项触发事件
    const selectEvent = (labels: string | number) => {
      inputValue.value = labels;
      console.log(inputValue.value);

      xDown.value?.hidePanel().then(() => {
        list.value = data.value;
      });
      context.emit("input", labels);
      context.emit("update:value", labels);
    };
    const onInput = (value: string) => {
      context.emit("input", value);
      context.emit("update:value", value);
    };
    const onChange = (value: string) => {
      context.emit("change", value);
    };
    return {
      inputValue,
      list,
      xDown,
      xInput,
      focusEvent,
      keyupEvent,
      selectEvent,
      onInput,
      onChange
    };
  }
});
</script>

<style lang="scss" scoped>
.list-item2 {
  width: 100%;
  cursor: pointer;
  overflow-x: hidden;
  text-overflow: ellipsis;
  // white-space: nowrap;
  &:hover {
    background-color: rgba(64, 169, 255, 0.2);
  }
}
</style>
